<template>
    <view class="page">
        <u-sticky bgColor="#fff">
            <u-tabs :list="list" :current="current" lineWidth="60" lineColor="#f56c6c" :activeStyle="{color: '#303133',}" @change="ChangeHandler"></u-tabs>
        </u-sticky>
        <view class="content">
            <view class="box" v-for="(item,index) in coupons">
                <view class="day">
                    <text style="font-size: 60rpx;font-weight: bold;color: #A6955E">{{item.c_time}}天</text>
                    <text style="font-size: 26rpx">无门槛</text>
                    <u-gap height="10rpx"></u-gap>
                </view>
                <view class="desc">
                    <text style="font-size: 30rpx;color: #A6955E">{{item.title}}</text>
                    <text style="font-size: 26rpx;color: #666">有效期至：{{item.end_date}}</text>
                    <view @click="use(item)">
                        <u-text :suffixIcon="item.down?'arrow-down':'arrow-up'" margin="10rpx 0" type="info"
                                size="22rpx" iconStyle="font-size: 22rpx; margin-left:10rpx" text="使用说明"></u-text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coupon",
        data() {
            return{
                current: 0,
                update:false,
                list: [{
                    name: '未使用',
                    type: 1
                }, {
                    name: '已使用',
                    type: 2
                }, {
                    name: '已过期',
                    type: 3
                }],
                coupons:[],
                down: true
            };
        },
        onLoad(){
            this.getCouponList({
                u_id: uni.getStorageSync('u_id'),
                type: 1
            });
        },
        methods:{
            ChangeHandler(e){
                // uni.showLoading({title: '正在加载'});
                this.current = e.index;

                let params = {
                    u_id: uni.getStorageSync('u_id'),
                    type: this.list[this.current].type
                };
                this.getCouponList(params);

                // 刷新组件
                this.reload();
            },

            reload() {
                // 移除组件
                this.update = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.update = true
                })
            },
            use(item){
                item.down = !item.down;
            },

            getCouponList(params){
                uni.$u.http.get('/api.php/UserClinet/get_user_coupon' + uni.$u.queryParams(params)).then(res => {
                    uni.hideLoading();
                    for (let i = 0; i < res.length; i++) {
                        res[i].down = true;
                    }
                    this.coupons = res;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        /*background-color: RGBA(245, 245, 245, 1);*/
        background-color: #f3f4f6;
    }
    .content{
        /*padding: 20rpx;*/
    }

    .box{
        width: 100%;
        height: 220rpx;
        @include flex;
        background-image: url('../../../static/coupon-bg.png');
        background-size: contain;
        background-repeat: no-repeat;

        .day{
            width: 28%;
            /*background-color: #FF7F00;*/
            @include flex(column);
            align-items: center;
            justify-content: center;
        }
        .desc{
            width: 66%;
            /*background-color: #33A7FF;*/
            padding-left: 20rpx;
            @include flex(column);
            align-items: flex-start;
            justify-content: center;
        }
    }
</style>